<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.30/vue.global.min.js" type="application/javascript"></script>
</head>
<body>

  
    <div id="app">
            <cp1 a="1" :b="1" @abc="fn1" ></cp1>
            <cp2></cp2>
    </div>
    

        
    
    <script>  
           const { ref,reactive,toRef ,toRefs, onMounted ,watch } = Vue;
           const app = Vue.createApp({ });

           // global 全局  Properties 属性
           app.config.globalProperties.$a = 123
       
           // 组合式函数 就是一个函数当中 用来规划 状态和修改状态的方法，方便得到的共同业务的地方直接通过这个
           // 组合式函数来得到 这些公用的数据
           // 组合函数 的命名规则 一般为 use 开头（约定）
           // 有的人习惯把这个技术称为自定义hook

           const useWindow = ()=>{
                // 在函数当中我们也可以使用 ref等 vue的Hook
                const width = ref(window.innerWidth);
                const height = ref(window.innerHeight);
                const num = ref(0)
                onMounted(()=>{
                    window.addEventListener('resize',()=>{
                        width.value = window.innerWidth;
                        height.value = window.innerHeight
                    })
                })
                
                return {
                    width,
                    height,
                    num
                }
           }

           app.component('cp1',{
             template:`<div>    
                            我是cp1组件 {{ width }} * {{ height }}
                            <button @click="num++">点击加一 </button>
                            <div>{{ num }}</div>
                        </div>`,
             setup(){
                const { width, height,num} = useWindow();
                // watch('useWindow', function (newValue, oldValue) {
                // console.log(newValue,oldValue)
                // console.log(useWindow().num.value)
                // });
                watch(num,(nv,ov)=>{
                        console.log('nv',nv)
                        console.log('ov',ov)
                    },{
                        deep: true,
                        immediate: true
                    })
                return {
                    width,
                    height,
                    num
                }
             }           
            
             
        })

 
           app.component('cp2',{
                template:`<div>
                            我是cp2 {{ width }} * {{ height }}
                            <p > {{ num }} </p>
                            <button @click="num++">点击加一 </button>
                         </div>`,
                setup(){
                    const { width, height,num } = useWindow();
                    
                    return {
                        width,
                        height,
                        num 
                    }
                }   
                
               
            })
           app.mount('#app') //  vue2  app.$mount()
        

    </script>

</body>
</html>